<template>
  <div>
    详细数据
    <div>
      <Data />
    </div>

    <div class="annual-curve">
      <el-button type="primary" class="button-width" @click="yuangong">按员工</el-button>
      <el-button type="success" class="button-width" @click="bumen">按部门</el-button>
    </div>
    <div>
      <XiangQing v-show="bb">
      </XiangQing>
    </div>
    <div>
      <AnBuMen v-show="aa">
      </AnBuMen>
    </div>
    <div>
      <Paging />
    </div>
  </div>
</template>

<script>
import Paging from "../../components/Paging.vue";
import Data from "../../components/Data/dataone.vue";
import XiangQing from "../../components/Data/xiangqing.vue";
import AnBuMen from "../../components/Data/anbumen.vue";
export default {
  components: {
    Paging,
    Data,
    XiangQing,
    AnBuMen,
  },
  data() {
    return{
      bb:true,
      aa:false,
    };
  },
   methods: {
    yuangong(){
      this.bb = true;
      this.aa = false;
    },
    bumen(){
      this.bb = false;
      this.aa = true;
    }
  },
};
</script>

<style>
.annual-curve {
  display: flex;
  justify-content: center;
}
.button-width {
  width: 120px;
  height: 38px;
}
</style>